<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<meta charset="UTF-8" http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">

<div class="main_info">
    <div class="box_full">
        <div class="float-right">
            <button onclick="editer('/sys/role/edit_box/-1');" class="layui-btn layui-btn-xs">+角色</button>
        </div>
        <table width="100%" id="moudleTable" class="layui-table" border="0" cellspacing="0" cellpadding="0">
            <thead>
            <tr>
                <th width="6%">ID</th>
                <th width="5%">角色名称</a></th>
                <th width="15%">操作</a></th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="role:${sysRoleList}" data-th-id="${role.id }" data-th-pid="${role.id}">
                <td width="6%" th:text="${role.id}">ID</td>
                <td width="40%" th:text="${role.roleName}">角色名称</td>
                <td width="15%">
                    <div class="layui-btn-group">
                        <button data-th-data-edit="'/sys/role/edit_box/'+${role.id}" class="role_edit layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
                        <button data-th-data-edit="'/sys/role/del/'+${role.id}" class="role_del layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
                    </div>
                </td>
            </tr>
            </tbody>
         </table>
    </div>
</div>
<script>
    var layform;
    layui.use(['form'], function () { // 加载 layui的功能模块
        layform = layui.form;
        layform.render("checkbox"); // 重新渲染 checkbox
    });


    $(".role_edit").click(function (e) {
        var url = $(this).data('edit');
        console.log(url);
        editer(url,"新增或编辑角色");
    }) ;

    $(".role_del").click(function (e) {
        var url = $(this).data('edit');
        console.log(url);
        toDel(url);
    }) ;

</script>

